<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  #left{
    float: left;
    width: 30%;
    height: 500px;
    margin-left: 200px;
  }
  #right{
    float: right;
    width: 30%;
    height: 500px;
  }
  #top{
    margin-top: 50px;
    float: top;
    width: 30%;
    height: 250px;
  }
  #content{
    border: aquamarine 1px solid;
    width: 100%;
    height: 300px;
  }
  #input{
    margin-top: 20px;
    width: 100%;
    height: 200px;
  }
  #input input{
    width: 100%;
    height: 100px;
  }
  #input button{
    float: right;
  }
  #mes_left{
    float: left;

  }
  #mes_right{
    float: right;
    width: 50%;
    text-align: right;
  }
  #a{ z-index: 9999;
    position: relative;
    display: inline-block;
  }
  primary {

    background: #0abdfe;

    border-color: #fe0a0a;

  }
</style>
<body>
<script src="js/jquery.min.js"></script>
<script src="/js/vue.js"></script>
<h3 style="text-align: center" id="username"></h3>
<div >
  <div id="left">
    <h4 id="new"></h4>
    <div id="content">

    </div>
    <div id="input">
      <input type="text" id="input_text">
      <button id="submit">发送</button>
    </div>
  </div>
  <div id="right">
    <div id="top">
      <p>在线的好友</p>
      <input placeholder="用户名称" name="addfriendname" id="addfriendname" style="width: 80px"; class="filter-item"/>
      <button type="primary" onclick="AddFriend()">添加好友</button><br/>
      <input placeholder="用户名称" name="delfriendname" id="delfriendname" style="width: 80px"; class="filter-item"/>
      <button type="primary" onclick="DelFriend()">删除好友</button>
      <div id="hylist">
      </div>
    </div>
    <div id="bottom">
      <p>系统广播</p>
      <div id="xtlist">
      </div>
    </div>
  </div>
</div>
  <!-- 新增标签弹层 -->

<script>

  var username;
  $(function () {
    var toName;
    $.ajax({
      url:"getUsername",
      success:function (res) {
        username = res;
        $("#username").html("用户："+ username +"<span>在线</span>");
        // $("#username").html("用户：123<span>在线</span>");
      },
      async:false //同步请求，只有上面好了才会接着下面
    });

    var ws = new WebSocket("ws://localhost:8080/chat");
    ws.onopen = function (ev) {
      $("#username").html("用户："+ username +"<span>在线</span>");
    }
    //接受消息
    ws.onmessage = function (ev) {
      var datastr = ev.data;
      var res = JSON.parse(datastr);
      //判断是否是系统消息
      if(res.system){
        //好友列表
        //系统广播
        var names = res.message;
        var userlistStr = "";
        var broadcastListStr = "";
        for (var name of names){
          if (name != username){

            userlistStr += "<input type='button'  value='"+ name +"' onclick='showChat(\""+name+"\")'/></br>";
            //userlistStr += "<a οnClick='showChat(\""+name+"\");'>"+ name +"</a></br>";
            broadcastListStr += "<p>"+ name +"上线了</p>";
          }
        };
        $("#hylist").html(userlistStr);
        $("#xtlist").html(broadcastListStr);

      }else {
        //不是系统消息
        var str = "<span id='mes_left'>"+res.fromname+":"+res.message +"</span></br>";
        if (toName == res.fromname)
          $("#content").append(str);

        var chatdata = sessionStorage.getItem(res.fromname);
        if (chatdata != null){
          str = chatdata + str;
        }
        sessionStorage.setItem(res.fromname,str);

      };
    },
            ws.onclose = function (ev) {
              $("#username").html("用户："+ username +"<span>离线</span>");
            }


    showChat =function (name)  {
      toName = name;
      //清空聊天区
      $("#content").html("");
      $("#new").html("当前正与"+toName+"聊天");
      var chatdata = sessionStorage.getItem(toName);
      if (chatdata != null){
        $("#content").html(chatdata);
      }
    };
   /* var Fname = document.getElementById("friendname").value;*/

            AddFriend =function ()  {
              var Fname = $("#addfriendname").val();
      $.ajax({
        url: '/addfriend?Fname='+Fname,
        type: 'post',
        data:
          Fname,
        dataType: 'text',
        success: function(res) {
          var resToObject=JSON.parse(res);
          if(resToObject.flag==true){

            alert("添加成功");
          }
          if(!resToObject.flag){
            alert("添加失败");
          }
        },
        error: function() {
          alert("添加失败");
        }
      });
    };
    DelFriend =function ()  {
      var Dname = $("#delfriendname").val();
      $.ajax({
        url: '/delfriend?Dname='+Dname,
        type: 'post',
        data:
        Dname,
        dataType: 'text',
        success: function(res) {
          var resToObject=JSON.parse(res);
          if(resToObject.flag==true){

            alert("删除成功");
          }
          if(!resToObject.flag){
            alert("删除失败");
          }
        },
        error: function() {
          alert("删除失败");
        }
      });
    }
    //发送消息
    $("#submit").click(function () {
      //获取输入的内容
      var data = $("#input_text").val();
      $("#input_text").val("");
      var json = {"toName": toName ,"message": data};
      //将数据展示在聊天区
      var str = "<span id='mes_right'>"+data+":"+username+"</span></br>";
      $("#content").append(str);

      var chatdata = sessionStorage.getItem(toName);
      if (chatdata != null){
        str = chatdata + str;
      }
      sessionStorage.setItem(toName,str);
      //发送数据
      ws.send(JSON.stringify(json));
    })
  })
</script>
</body>
</html>
